<template>
    <!-- 所有的内容要被根节点包含 -->
    <div id="home">

        <!-- 引入head组件 -->
        <v-head></v-head>
        <h2>这是一个Home组件--{{message}}</h2>

        <hr>
        <br>
        <br>
        <br>

        <v-life v-if="flag"></v-life>
        <button v-on:click="flag=!flag">挂载以及卸载life组件</button>

    </div>
</template>

<script>
    import Head from "./Head.vue";
    import Life from "./life.vue";
    export default {
        data() {
            return {
                message: "我是一个Home组件",
                flag: true
            };
        },
        methods: {
            run() {
                alert(this.message);
            }
        },
        // 挂载组件
        components: {
            "v-head": Head,
            "v-life": Life
        }
    };
</script>

<!-- 方法二 或者添加scoped ，部作用域，两者选其一。 -->
<style lang="scss" scoped>
    /* 方法一：#home指定作用域 */
    h2 {
        color: red;
    }
</style>